<!-- 349 create by hxg 2021/12/11 -->
<template>
  <div>
    <a-space class="common-button-group">
      <a-button type="primary" :loading="searchBtnLoading" @click="getList">{{ $t('common_query') }}</a-button>
    </a-space>
    <t-query-form layout="inline"
      ref="queryForm"
      group="WipByOperationBoxPallet"
      :model="queryForm"
      >
      <a-row
        :gutter="[16, 0]"
      >
        <a-col :span="6">
          <a-form-item :label="$t('T9_productType')"
                       name="productType"
                       prop="productType">
            <a-select v-model:value="queryForm.productType"
                      class="select-width"
                      @change="changeProductType" show-search>
              <a-select-option v-for="item in productTypeArr"
                               :key="item.enumValue"
                               :value="item.enumValue">
                {{ item.enumValue }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item :label="$t('T9_productId')"
                       name="productId"
                       prop="productId">
            <a-select v-model:value="queryForm.productId"
                      class="select-width" show-search>
              <a-select-option v-for="item in productIdArr"
                               :key="item.productId"
                               :value="item.productId">
                {{ item.productId }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
    </t-query-form>
    <a-row type="flex" justify="space-between" align="middle" class="global-oper-row mt-2">
      <a-col :span="15" class="global-oper-row-title">{{ $t('T9_boxPalletPanelInfo') }}</a-col>
    </a-row>
    <t-table
      :data="table.boxPalletList"
      class="mytable-style"
          :cell-class-name="cellClassName"
    >
    <t-column field="sumTitle"></t-column>
      <t-column field="box" :title="$t('T9_box')" />
      <t-column field="pallet" :title="$t('T9_pallet')" />
      <t-column field="panel" :title="$t('T9_panel')" />
    </t-table>
    <a-row type="flex" justify="space-between" align="middle" class="global-oper-row mt-2">
      <a-col :span="15" class="global-oper-row-title">{{ $t('T9_operationList') }}</a-col>
      <a-col :span="8" class="global-oper-row-extra">
        <a-button>{{ $t('t9_toExcel') }}</a-button>
      </a-col>
    </a-row>
  <t-table
      :data="table.operationList"
    >
      <t-column field="route" :title="$t('T9_route')" />
      <t-column field="operation" :title="$t('T9_operation')" />
      <t-column field="desc" :title="$t('T9_desc')" />
      <t-column field="boxQty" :title="$t('T9_boxQty')" />
      <t-column field="palletQty" :title="$t('T9_palletQty')" />
      <t-column field="panelQty" :title="$t('T9_panelQty')" />
    </t-table>
    <a-row type="flex" justify="space-between" align="middle" class="global-oper-row mt-2">
      <a-col :span="15" class="global-oper-row-title">{{ $t('T9_stateInfo') }}</a-col>
    </a-row>
    <t-query-form layout="inline"
      ref="dataForm"
      :model="dataForm"
      >
        <a-row
        :gutter="[16, 0]"
      >
       <a-col :span="6">
          <a-form-item :label="$t('T9_runState')" name="runState" prop="runState">
            <a-input v-model:value="dataForm.runState" disabled />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item :label="$t('T9_waitState')" name="waitState" prop="waitState">
            <a-input v-model:value="dataForm.waitState" disabled />
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item :label="$t('T9_others')" name="others" prop="others">
            <a-input v-model:value="dataForm.others" disabled />
          </a-form-item>
        </a-col>
        </a-row>
      </t-query-form>
          <a-row type="flex" justify="space-between" align="middle" class="global-oper-row mt-2">
      <a-col :span="15" class="global-oper-row-title">{{ $t('T9_boxList') }}</a-col>
      <a-col :span="8" class="global-oper-row-extra">
        <a-button>{{ $t('t9_toExcel') }}</a-button>
      </a-col>
    </a-row>
      <t-table
      :data="table.boxList"
    >
      <t-column field="boxId" :title="$t('T9_boxId')" />
      <t-column field="palletId" :title="$t('T9_palletId')" />
      <t-column field="panelGrade" :title="$t('T9_panelGrade')" />
      <t-column field="productId" :title="$t('T9_productId')" />
      <t-column field="owner" :title="$t('T9_owner')" />
      <t-column field="ownerType" :title="$t('T9_ownerType')" />
      <t-column field="groupId" :title="$t('T9_groupId')" />
      <t-column field="panelQty" :title="$t('T9_panelQty')" />
      <t-column field="route" :title="$t('T9_route')" />
      <t-column field="processState" :title="$t('T9_processState')" />
      <t-column field="eqId" :title="$t('T9_eqId')" />
      <t-column field="bankId" :title="$t('T9_bankId')" />
      <t-column field="zoneId" :title="$t('T9_zoneId')" />
      <t-column field="location" :title="$t('T9_location')" />
      <t-column field="shipGroupId" :title="$t('T9_shipGroupId')" />
      <t-column field="outLocation" :title="$t('T9_outLocation')" />
      <t-column field="stayHour" :title="$t('T9_stayHour')" />
      <t-column field="multiOwnerId" :title="$t('T9_multiOwnerId')" />
    </t-table>
  </div>
</template>

<script>
  import { defineComponent } from 'vue'
  import {
    getProductType,
    getProductId,
    getList
  } from '@/api/common'

  export default defineComponent({
    name: 'WipByOperationBoxPallet',
    components: {},
    data() {
      return {
        searchBtnLoading: false,
        table: {
          boxPalletList: [
            {
              sumTitle: 'Operation Sum', box: '', pallet: '', panel: ''
            },
            {
              sumTitle: 'Shipping Sum', box: '', pallet: '', panel: ''
            },
            {
              sumTitle: 'Total Sum', box: '', pallet: '', panel: ''
            }
          ],
          operationList: [],
          boxList: []
        },
        productTypeArr: [],
        productIdArr: [],
        queryForm: {
          productType: '',
          productId: ''
        },
        dataForm: {
          runState: '',
          waitState: '',
          others: ''
        }
      }
    },
    computed: {},
    watch: {},
    created() {
      this.getProductType()
    },
    methods: {
      getProductType() {
        getProductType().then(res => {
          this.productTypeArr = res
        })
      },
      cellClassName(row) {
        if (row.column.property === 'sumTitle') {
          return 'col-gray'
        }
        return ''
      },
      changeProductType() {
        const params = {
          shopId: 'CELL',
          productType: this.queryForm.productType
        }
        getProductId(params).then((res) => {
          this.productIdArr = res
        })
      },
      getList() {
        const obj = {
          dtoName: 'ViewWipByOperationOperationListDTO',
          processGroupType: 'Box',
          processState: 'Released',
          productId: '',
          productType: this.queryForm.productType,
          productVer: '',
          queryId: 'GetProcessGroupList',
          shopId: 'CELL',
          version: '80018',
          menuName: 'viewWipByOperationBoxPallet',
          usage: 'getOperationList'
        }
        getList(obj).then(res => {
          this.table.operationList = res.viewWipByOperationOperationListDTOList
          const arr = ['operation', 'ship', 'total']
          arr.forEach((it, index) => {
            this.table.boxPalletList[index].box = res[`${it}Box`]
            this.table.boxPalletList[index].pallet = res[`${it}Pallet`]
            this.table.boxPalletList[index].panel = res[`${it}Panel`]
          })
        })
        const params = {
          dtoName: 'ViewWipByOperationBoxInfoListDTO',
          processGroupType: 'Box',
          processState: 'Released',
          productId: '',
          productType: this.queryForm.productType,
          productVer: '',
          queryId: 'GetProcessGroupList',
          shopId: 'CELL',
          version: '81014',
          route: 'CJ645001',
          operation: '9990',
          menuName: 'viewWipByOperationBoxPallet',
          usage: 'getBoxList'
        }
        getList(params).then(res => {
          this.table.boxList = res
        })
      }
    }
  })
</script>
<style lang="less" scoped>
/deep/ .ant-row, .ant-row:after, .ant-row:before {
    display: flex;
    flex: 1;
}
/deep/.mytable-style{
.vxe-body--column.col-gray {
          background-color: #d8def5;
          color: rgba(4,12,44,.65);
        }
}
</style>
